﻿<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Timeline._Default" %>
<%@ Register assembly="Timeline" namespace="Timeline" tagprefix="tl" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css">
        .Timeline
        {
            color: Black;
            border-radius: 15px;
            border-style: solid;
            border-width: 1px;
            border-color: #969799;
            box-shadow: 0px 0px 10px 1px #BFBFBF;
         
            background-image: linear-gradient(bottom, #D2D2D2 22%, #C5C5C5 50%);
            -pie-background: linear-gradient(#C5C5C5, #D2D2D2);
            background-image: -o-linear-gradient(bottom, #D2D2D2 22%, #C5C5C5 50%);
            background-image: -moz-linear-gradient(bottom, #D2D2D2 22%, #C5C5C5 50%);
            background-image: -webkit-linear-gradient(bottom, #D2D2D2 22%, #C5C5C5 50%);
            background-image: -ms-linear-gradient(bottom, #D2D2D2 22%, #C5C5C5 50%);

            position: relative;
            behavior: url(/Scripts/PIE/PIE.htc);
        }
        
        .TimelineIndicator
        {
            background-color: #E2E2E2;
        }
        
        .TimelineValue1
        {
            background-image: linear-gradient(bottom, #33A2AD 22%, #62BFC6 50%);
            -pie-background: linear-gradient(#62BFC6, #33A2AD);
            background-image: -o-linear-gradient(bottom, #33A2AD 22%, #62BFC6 50%);
            background-image: -moz-linear-gradient(bottom, #33A2AD 22%, #62BFC6 50%);
            background-image: -webkit-linear-gradient(bottom, #33A2AD 22%, #62BFC6 50%);
            background-image: -ms-linear-gradient(bottom, #33A2AD 22%, #62BFC6 50%);
            
            position: relative;
            behavior: url(/Scripts/PIE/PIE.htc);
        }
        
        .TimelineValue2
        {
            background-image: linear-gradient(bottom, #00A11D 22%, #52C560 50%);
            -pie-background: linear-gradient(#52C560, #00A11D);
            background-image: -o-linear-gradient(bottom, #00A11D 22%, #52C560 50%);
            background-image: -moz-linear-gradient(bottom, #00A11D 22%, #52C560 50%);
            background-image: -webkit-linear-gradient(bottom, #00A11D 22%, #52C560 50%);
            background-image: -ms-linear-gradient(bottom, #00A11D 22%, #52C560 50%);
            
            position:relative;
            behavior: url(/Scripts/PIE/PIE.htc);
        }
        
        .TimelineValue3
        {
            background-image: linear-gradient(bottom, #9B0000 22%, #E10203 50%);
            -pie-background: linear-gradient(#E10203, #9B0000);
            background-image: -o-linear-gradient(bottom, #9B0000 22%, #E10203 50%);
            background-image: -moz-linear-gradient(bottom, #9B0000 22%, #E10203 50%);
            background-image: -webkit-linear-gradient(bottom, #9B0000 22%, #E10203 50%);
            background-image: -ms-linear-gradient(bottom, #9B0000 22%, #E10203 50%);
            
            position: relative;
            behavior: url(/Scripts/PIE/PIE.htc);
        }
        
        .TimelineValue4
        {
            background-image: linear-gradient(bottom, #00A11D 22%, #52C560 50%);
            -pie-background: linear-gradient(#52C560, #00A11D);
            background-image: -o-linear-gradient(bottom, #00A11D 22%, #52C560 50%);
            background-image: -moz-linear-gradient(bottom, #00A11D 22%, #52C560 50%);
            background-image: -webkit-linear-gradient(bottom, #00A11D 22%, #52C560 50%);
            background-image: -ms-linear-gradient(bottom, #00A11D 22%, #52C560 50%);
            
            position: relative;
            behavior: url(/Scripts/PIE/PIE.htc);
        }
        
        .TimelineLabel
        {
            border-radius: 5px;
            background-color: #DFDFDF;  
            position: absolute;
			z-index: 1;
            left: -15px;
            top: 12px;
            padding: 2px;
            behavior: url(/_layouts/RVPONP.MyPensionV3.Webparts/PIE/PIE.htc);
        }
        
        .TimelineFirstLabel
        {
            border-radius: 5px;
            background-color: #DFDFDF;
			z-index: 0;
            text-align: center;
            left: -15px;
			top: -5px;
            padding: 2px;
            position: absolute;
            behavior: url(/_layouts/RVPONP.MyPensionV3.Webparts/PIE/PIE.htc);
        }
        
        .TimelineLastLabel
        {
            border-radius: 5px;
            background-color: #DFDFDF;
			z-index: 0;
            text-align: center;
            left: -15px;
			top: -5px;
            padding: 2px;
            position: absolute;
            behavior: url(/_layouts/RVPONP.MyPensionV3.Webparts/PIE/PIE.htc);
        }
        
        .TimelineAdditionalLabel
        {
            border-radius: 5px;
            background-color: #DFDFDF;  
            position: absolute;
			z-index: 2;
            left: -12px;
            top: -22px;
            padding: 2px;
            behavior: url(/_layouts/RVPONP.MyPensionV3.Webparts/PIE/PIE.htc);
        }
        
        .TimelineLabelArrow
        {
            border-width: 5px;  
            border-color: #DFDFDF transparent transparent transparent;  
            border-style: solid;
			z-index: 1;
            position: absolute;
            top: 29px;
            left: -3px;
        }
        
        .TimelineLabelFirstArrow
        {
            border-width: 23px 5px 5px 5px;
            border-color: #DFDFDF transparent transparent transparent;  
            border-style: solid;
            z-index: 0;
            position: absolute;
            top: 12px;
            left: -3px;
        }
        
        .TimelineLabelLastArrow
        {
            border-width: 23px 5px 5px 5px;
            border-color: #DFDFDF transparent transparent transparent;  
            border-style: solid;
            z-index: 0;
            position: absolute;
            top: 12px;
            left: -3px;
        }
        
        .TimelineAdditionalLabelArrow
        {
            border-width: 41px 5px 5px 5px;  
            border-color: #DFDFDF transparent transparent transparent;  
            border-style: solid;
			z-index: 2;
            position: absolute;
            top: -5px;
            left: -3px;
        }
    </style>
</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div style="width: 100%;">
        <tl:Timeline ID="timeline1" runat="server" FromYear="1984" ToYear="2016" CssClass="Timeline" IndicatorCssClass="TimelineIndicator" GenerateLabels="true" LabelCssClass="TimelineLabel" LabelFirstCssClass="TimelineFirstLabel" LabelLastCssClass="TimelineLastLabel" LabelArrowCssClass="TimelineLabelArrow" LabelArrowFirstCssClass="TimelineLabelFirstArrow" LabelArrowLastCssClass="TimelineLabelLastArrow" BigYearIndicator="5" SmallYearIndicator="1" ToolTip="test tt" OnClickJS="javascript:alert('timeline');" YearWidthFirstLabel="2" YearWidthLastLabel="2">
            <Values BackgroundCssClass="TimelineValue3" ToolTip="value collection tt" OnClickJS="javascript:alert('timeline value collection');">
                <Value FromYear="1984" ToYear="1990" BackgroundCssClass="TimelineValue1" ToolTip="value tt" />
                <Value FromYear="1991" ToYear="1994" BackgroundCssClass="TimelineValue2" OnClickJS="javascript:alert('timeline value 2');" />
                <Value FromYear="1996" ToYear="2000" />
                <Value FromYear="2002" ToYear="2005" BackgroundCssClass="TimelineValue4" />
            </Values>
            <AdditionalIndicators LabelCssClass="TimelineAdditionalLabel" LabelArrowCssClass="TimelineAdditionalLabelArrow" ToolTip="additional indicator collection tt" OnClickJS="javascript:alert('additional indicator collection');">
                <AdditionalIndicator Year="1998" Text="AI_1" />
                <AdditionalIndicator Year="2003" Text="AI_2" LabelCssClass="TimelineAdditionalLabel" LabelArrowCssClass="TimelineAdditionalLabelArrow" ToolTip="additional indicator tt" OnClickJS="javascript:alert('additional indicator 2');" />
            </AdditionalIndicators>
        </tl:Timeline>
        <br />
        <tl:Timeline ID="timeline2" runat="server" FromYear="1984" ToYear="2016" CssClass="Timeline" IndicatorCssClass="TimelineIndicator" BigYearIndicator="5" SmallYearIndicator="1">
            <Values>
                <Value FromYear="1995" ToYear="1995" BackgroundCssClass="TimelineValue1" />
                <Value FromYear="2000" ToYear="2002" BackgroundCssClass="TimelineValue2" />
                <Value FromYear="2006" ToYear="2013" BackgroundCssClass="TimelineValue3" />
            </Values>
        </tl:Timeline>
        <br />
        <tl:Timeline ID="timeline3" runat="server" />
    </div>
</asp:Content>